<template>
	<a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false" :bodyStyle="{ paddingBottom: '60px' }">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">


			<!-- 登录账号 -->
			<a-form-model-item label="登录账号" prop="account" ref="account">
				<a-input :placeholder="placeholder.account" v-model="form.account" :disabled="isUpdate" />
			</a-form-model-item>
			<a-form-model-item v-if="!isUpdate" label="登录密码" prop="password" ref="password">
				<a-input :placeholder="placeholder.password" v-model="form.password" />
			</a-form-model-item>
			<a-form-model-item label="操作员姓名" prop="name" ref="name"><a-input :placeholder="placeholder.name" v-model="form.name" /></a-form-model-item>
			<a-form-model-item label="手机号码" prop="phone" ref="phone"><a-input :placeholder="placeholder.phone" v-model="form.phone" /></a-form-model-item>
			<a-form-model-item label="电子邮箱" prop="email" ref="email"><a-input :placeholder="placeholder.email" v-model="form.email" /></a-form-model-item>

			<a-form-model-item label="账号状态" prop="status" ref="status">
				<a-radio-group v-model="form.status" buttonStyle="solid">
					<a-radio-button v-for="(item, index) in OperatorStatusOPT" :key="index" :value="item.value">{{ item.label }}</a-radio-button>
				</a-radio-group>
			</a-form-model-item>

			<a-form-model-item  label="头像"   ref="avatar">
				<!--头像上传组件-->
				<avatarUpload   :imgUrl="form.avatar"    @callBack="(e)=>{ form={...form,...{avatar:e}}}" />

			</a-form-model-item>

			<a-form-model-item label="用户角色">
				<a-checkbox-group :value="form.roleArr" @change="onChange">
					<a-row>
						<a-col :span="24" v-for="(item, index) in sysRoleList" :key="index" class="padding10">
							<a-checkbox :value="item.id">
								<a-tag color="blue" v-if="item.attribute === '1'">{{ item.name }}</a-tag>
								<span v-else>{{ item.name }}</span>
							</a-checkbox>
						</a-col>
					</a-row>
				</a-checkbox-group>
			</a-form-model-item>
		</a-form-model>
		<!-- Modal 页脚 -->
		<footer class="drawer-footer"><a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button></footer>
	</a-drawer>
</template>
<script>
import { dictLoad } from '../../../util/internal.api';
import { operatorAdd, operatorUpdate, operatorRoleList } from '../public/http.js';
export default {
	props: ['editRecord'],
	components:{
		//头像上传组件
		avatarUpload: resolve => {require(['./AvatarUpload.vue'], resolve);}
	},
	data() {
		return {
			isUpdate: false, //是否是更新模式
			loading: false, //按钮Loading
			title: '新增操作员',
			visible: true, //modal 显示状态
			labelCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 5
				}
			},
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 16
				}
			},
			RoleAttributeOpt: [], //操作员属性字段选项
			placeholder: {
				account: '请设置登录账号',
				password: '请设置登录密码 ',
				name: '请设置操作员名称',
				phone: '请设置手机号码',
				email: '请设置电子邮箱'
			},
			form: {
				avatar:null,
				name: '',
				password: '',
				phone: null,
				email: null,
				status: '1',
				roleArr: []
			},
			rules: {
				account: [
					{
						required: true,
						message: '请设置操作员登录账号',
						trigger: 'blur'
					},
					{
						max: 20,
						message: '登录账号长度请最多设置16个字符',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请设置登录密码',
						trigger: 'blur'
					},
					{
						max: 20,
						message: '登录密码长度请最多设置20个字符串',
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: '请设置操作员姓名',
						trigger: 'blur'
					},
					{
						max: 20,
						message: '操作员姓名长度请最多设置20个字符串',
						trigger: 'blur'
					}
				],
				phone: [
					{
						required: false,
						pattern: /^1[3-56789]\d{9}$/,
						message: '请填写正确的电话号码',
						trigger: 'blur'
					}
				],
				email: [
					{
						required: false,
						trigger: 'blur'
					},
					{
						type: 'email',
						message: '请设置正确的邮箱格式',
						trigger: 'blur'
					}
				]
			},
			sysRoleList: [], //当前系统拥有的权限列表
			OperatorStatusOPT: [] //员工状态
		};
	},
	methods: {
		getOperatorRoleList() {
			operatorRoleList(this.editRecord.id).then(res => {
				//系统角色
				this.sysRoleList = res.data.orgRoleList;
				//选中的角色
				let operatorRoleList = res.data.operatorRoleList;
				let checkedArr = [];
				operatorRoleList.map(item => {
					checkedArr.push(item.role_id);
				});
				this.form.roleArr = checkedArr;
			});
		},
		//单选选中
		radioChange(e) {
			console.log(e);
		},

		//多选菜单
		onChange(checkedValues) {
			this.form.roleArr = checkedValues;
		},
		//表单提交事件
		onSubmit() {
			this.$refs.ruleForm.validate(valid => {
				//验证成功后进行数据提交
				if (valid) {
					this.loading = true;
					if (this.isUpdate) {
						operatorUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
					} else {
						operatorAdd(this.form).then(res => this.xhrMsg(res));
					}
				}
			});
		},
		//新增和删除返回相同的消息构造
		xhrMsg(res) {
			if (res.code === 0) {
				//成功提醒
				this.$notification.success({
					message: '操作成功',
					description: res.message
				});
				this.visible = false;
				this.$emit('closeFun', {
					render: true
				});
			} else {
				//错误提醒
				this.$notification.error({
					message: '操作失败',
					description: res.message
				});
			}
			this.loading = false;
		},
		//关闭弹窗
		handleCancel() {
			this.visible = false;
			this.$emit('closeFun', {
				render: false
			});
		},
		//表单初始化
		fromVal() {
			let obj = {...this.editRecord};

			if (obj.id) {
				this.form = obj;
				this.isUpdate = true;
				this.title = '编辑操作员';
			}
			this.getOperatorRoleList();
		},
		//数据初始化
		async init() {
			await dictLoad('OperatorStatus').then(res => (this.OperatorStatusOPT = res));
			this.fromVal();
		}
	},

	created() {
		this.init();
	}
};
</script>
<style scoped>
.padding10 {
	padding: 0.3rem;
}
</style>
